<template>
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table :data="userList" border stripe  style="width: 75%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="email" label="电子邮箱" width="200"  />
        <el-table-column prop="phone" label="联系方式" width="150"  />
        <el-table-column  label="角色" width="120" >
          <template #default="scope">
            <el-tag v-if="scope.row.role == 0" class="mx-1" effect="dark" round> 管理员 </el-tag>
            <el-tag v-if="scope.row.role == 1" class="mx-1" effect="light" round>普通用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"  />
        <el-table-column prop="updateTime" label="更新时间"  />
      </el-table>
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1, 2, 3, 4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
<script>
import {getCurrentInstance,onMounted} from "vue";
import {findUserList} from "../../api/user.js";

export  default {
    name:'UserList'
    ,data(){
      return {
        currentPage:1
        ,pageSize:2
        ,totalPage:0
        ,totalSize:0
        ,userList:[
          {
            "id": 1,
            "username": "admin",
            "email": "admin@happymall.com",
            "phone": "13800138000",
            "role": 0,
            "createTime": "2016-11-06",
            "updateTime": "2017-04-04",
          },
        ]
      }
    }
    ,methods:{
    handleSizeChange(index){
      // console.log(index)
      this.pageSize = index;
      this.loadUserData();

    },
    handleCurrentChange(currentPage){
      // console.log(currentPage)
      this.currentPage = currentPage
      this.loadUserData();
    },
    async loadUserData(){
      const {data:ret} = await findUserList(this.currentPage,this.pageSize);
      this.userList = ret['data']['list']
      this.totalPage = ret['data']['pages']
      this.totalSize = ret['data']['total']
      console.log(ret['data'])

    }
  }
    ,setup(){
      const {ctx:ctx} = getCurrentInstance();
    onMounted(()=>{
      ctx.loadUserData();
    })
  }
  }
</script>
<style scoped>

</style>